<template>
  <el-dialog :title=title
             v-if="open"
             :visible.sync="open"
             :modal=false
             width="80%"
             center
  >
    <div class="app-container">
      <div id="receiptVoucherPrintArea" style="border: 1px solid black;">
        <el-row style="text-align: right;margin-top: 20px">
          <el-col :span="16" style="text-align: right;">
            <span class="areaTitle">企业采购（入库单）</span>
          </el-col>
          <el-col :span="8" style="margin-top: 10px">
            <span class="number"> No: {{ receiptVoucher.recptCode }}</span>
          </el-col>
        </el-row>
        <el-row class="printArea_row">
          <el-col :span="12">
            <span style="margin-left: 30px">供货商：</span>
            <span >{{ receiptVoucher.vendorName }}</span>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <span>入库单名称：</span>
            <span style="margin-right: 20px">{{ receiptVoucher.recptName }}</span>
          </el-col>
        </el-row>
        <el-row class="printArea_row">
          <el-col :span="12">
            <span style="margin-left: 30px">采购订单编号：</span>
            <span>{{receiptVoucher.poCode}}</span>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <span>入库日期：</span>
            <span style="margin-right: 20px">{{ receiptVoucher.recptDate }}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">

          <el-col :span="24" style="margin-left: 30px;margin-right: 30px">
            <table class="my-table" cellspacing="0">
              <thead>
              <tr>
                <th>物料编号</th>
                <th>物料名称</th>
                <th>规格型号</th>
                <th>单位</th>
                <th>入库数量</th>
                <th>批次号</th>
                <th>仓库名称</th>
                <th>库区名称</th>
                <th>库位名称</th>
                <th>有效期</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index) in receiptVoucherDetails" :key="index">
                <td>{{ item.itemCode }}</td>
                <td>{{ item.itemName }}</td>
                <td>{{ item.specification }}</td>
                <td>{{ item.unitOfMeasure }}</td>
                <td>{{ item.quantityRecived }}</td>
                <td>{{ item.batchCode }}</td>
                <td>{{ item.warehouseName }}</td>
                <td>{{ item.locationName }}</td>
                <td>{{ item.areaName }}</td>
                <td>{{ item.expireDate }}</td>
              </tr>
              <tr style="height: 50px">
                <td>备注：</td>
                <td colspan="9">{{receiptVoucher.remark}}</td>
              </tr>
              </tbody>
            </table>
          </el-col>
        </el-row>
        <el-row class="printArea_row">
          <el-col :span="8" style="margin-left: 30px">
            <span>采购单位：</span>
            <span>{{ receiptVoucher.purchase }}</span>
          </el-col>
          <el-col :span="5">
            <span>入库人：</span>
            <span>{{ receiptVoucher.storagePersonnel }}</span>
          </el-col>
          <el-col :span="4" style="text-align: center">
            <span>审核人：</span>
            <span>{{ receiptVoucher.reviewer }}</span>
          </el-col>
          <el-col :span="5" style="text-align: center">
            <span>签名：</span>
            <span></span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23" style="text-align: right;margin-bottom: 20px;margin-top: 30px">
            <span>单据生成时间：</span>
            <span>{{ receiptVoucher.createTime }}</span>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center;margin-top: 20px;">
        <el-button type="info" @click="cancel">返 回</el-button>
        <el-button type="primary" @click="print">打印</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {getDetail} from "@/api/mes/cg/receiptvoucher";
import printJS from "print-js";


export default {
  name: "infoView",
  data() {
    return {
      open: false,
      title: null,
      // 遮罩层
      loading: true,
      receiptVoucher: {},
      receiptVoucherDetails: [],
    };
  },
  created() {
    /* this.getList();
     //查询商品表方法
     this.getGoodsList();
     //查询供应商列表方法
     this.getSupplierlist();*/
  },
  methods: {
    init(id) {
      getDetail(id).then(response => {
        this.receiptVoucher = response.data;
        this.receiptVoucherDetails = response.data.cgReceiptVoucherDetailList;
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    print() {
      printJS({
        type: 'html',
        printable: 'receiptVoucherPrintArea',
        // 写入自定义样式
        headerStyle: 'text-align:center;width:100%;margin-top:50px;font-weight: 300;',
        style: `@page{ margin: 250cm 1cm 0cm 1cm; }
                            @media print{@page {size:landscape}}
                            .divider {
                              display: flex; /* 使用Flexbox布局 */
                              align-items: center; /* 垂直居中对齐 */
                              margin: 20px 0; /* 上下外边距 */
                            }

                            .divider::before,
                            .divider::after {
                              content: ""; /* 伪元素内容为空 */
                              flex: 1; /* 伸展占据剩余空间 */
                              border-top: 1px solid #d3d3d3; /* 灰色的上边线 */
                            }
                            .label {
                              display: flex;
                              padding: 10px 10px !important;
                              border: 1px solid #d3d3d3; /* 蓝色边框 */
                              border-radius: 10px; /* 圆角 */
                              background-color: #fff; /* 白色背景 */
                              color: #1b9aee; /* 蓝色字体 */
                              font-family: "苹方 常规", "苹方", sans-serif;
                              font-weight: 700;
                              font-style: normal;
                              font-size: 24px;
                              text-align: center;
                              line-height: 20px;
                            }

                            .product-audit {
                              height: 100px !important;
                              margin: 10px 20px 5px 20px !important;
                            }
                            .nav-bar{
                              width: 1500px !important;
                            }
                            .creator{
                              width: 120px !important;
                            }

                            .create-time{
                              width: 250px !important;
                            }

                            .noprint{
                              display:none !important;
                            }`,
        scanStyles: true,
        // 继承样式
        targetStyles: ['*'],
        maxWidth: 1920
      });
    },
  }
};
</script>

<style scoped>
.areaTitle {
  font-size: 30px;
  margin-right: 17%;
  font-weight: 600;
}

.number {
  font-size: 25px;
  font-weight: 600;
  margin-right: 5%;
}

.printArea_row {
  margin-top: 20px;
  font-size: 20px;
}

.my-table {
  width: 97%;
  text-align: center;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.my-table th {
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
}

.my-table td {
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
}
</style>

